<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家-水环境</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/water.css">
</head>
<body>
	<div class="pf-content">
		<div class="title_box">
			<h1 class="h_tit">实时数据监控</h1>
			<span class="today_date" id="today_date"></span>
		</div>
		<div class="dashboard_box">
			<ul id="dashboard_li">
				<li class="active"><a data-id="1004">林山水源地</a></li>
				<li><a data-id="1006">城南水厂</a></li>
				<li><a data-id="1007">远古水厂</a></li>
			</ul>
			<div class="boradContent">
				<ul id="dashboard_div">
					<li>
						<div class="boradList" id="borad0"></div>
					</li>
					<li>
						<div class="boradList" id="borad1"></div>
					</li>
					<li>
						<div class="boradList" id="borad2"></div>
					</li>
					<li>
						<div class="boradList" id="borad3"></div>
					</li>
				</ul>
			</div>
		</div>
		<h1 class="h_tit">时间段水质量分析</h1>
		<div class="water_time">
			<ul id="water_li">
				<li class="active"><a>pH</a></li>
				<li><a>水温</a></li>
				<li><a>溶解氧</a></li>
				<li><a>浊度</a></li>
			</ul>
			<div class="water_chart">
				<ul id="water_content">
		            <li class="show">
		            	<div id="waterChart"></div>
		            </li>
		        </ul>
			</div>
		</div>
		
	</div>
	<footer id="public_footer">
		<ul>
			<li>
				<a href="index.html">
					<span class="foot_pic air"></span>
					<span>大气环境</span>
				</a>
			</li>
			<li class="active">
				<a href="water-environment.html">
					<span class="foot_pic water"></span>
					<span>水环境</span>
				</a>
			</li>
			<li>
				<a href="voice-environment.html">
					<span class="foot_pic voice"></span>
					<span>声环境</span>
				</a>
			</li>
		</ul>
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/echart/echarts.min.js"></script>
<script src="assets/echart/macarons.js"></script>
<script type="text/javascript">
	var URL = 'http://58.213.141.220:8989/njhbindex';//'http://61.155.85.77:8999';
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  	}
  	Date.prototype.pattern = function(fmt) {
	    var o = {
	      "M+": this.getMonth() + 1, //月份
	      "d+": this.getDate(), //日
	      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
	      "H+": this.getHours(), //小时
	      "m+": this.getMinutes(), //分
	      "s+": this.getSeconds(), //秒
	      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	      "S": this.getMilliseconds() //毫秒
	    };
	    var week = {
	      "0": "\u65e5",
	      "1": "\u4e00",
	      "2": "\u4e8c",
	      "3": "\u4e09",
	      "4": "\u56db",
	      "5": "\u4e94",
	      "6": "\u516d"
	    };
	    if (/(y+)/.test(fmt)) {
	      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    }
	    if (/(E+)/.test(fmt)) {
	      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
	    }
	    for (var k in o) {
	      if (new RegExp("(" + k + ")").test(fmt)) {
	        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	      }
	    }
	    return fmt;
    }

    var now = new Date();
    var now_date = now.pattern("yyyy/MM/dd");
    $("#today_date").html(now_date);

    var tapPH=[], tapSW=[], tapRJ=[], tapZD = [];
  	$("#dashboard_li li").each(function(index,element){
  		if($(element).hasClass("active")){
  			var id = $(element).find("a").data("id");
  			getJSONData(URL+'/waterday?id='+id,function(data){
  				if(data.data[0]){
  					showPHchart('pH',data.data[0].ph);
					showSWchart('水温值',data.data[0].shuiwen.toFixed(2),'℃');
					showRJchart('溶解氧',data.data[0].rongjieyang,'mg/L');
					showZDchart('浊度值',data.data[0].zhuodu,' NTU');
  				}
			});
  		}
  	});
  	$("#dashboard_li li").click(function(){
  		var i = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        var id = $(this).find("a").data("id");
        getJSONData(URL+'/waterday?id='+id,function(data){
			if(id == 1004){
				showPHchart('pH',data.data[0].ph);
				showSWchart('水温值',data.data[0].shuiwen.toFixed(2),'℃');
				showRJchart('溶解氧',data.data[0].rongjieyang,'mg/L');
				showZDchart('浊度值',data.data[0].zhuodu,' NTU');
			}else if(id == 1006){
				showPHchart('pH',data.data[0].ph);
				showSWchart('水温值',data.data[0].shuiwen.toFixed(2),'℃');
				showRJchart('溶解氧',data.data[0].rongjieyang,'mg/L');
				showZDchart('浊度值',data.data[0].zhuodu,' NTU');
			}else if(id == 1007){
				showPHchart('pH',data.data[0].ph);
				showSWchart('水温值',data.data[0].shuiwen.toFixed(2),'℃');
				showRJchart('溶解氧',data.data[0].rongjieyang,'mg/L');
				showZDchart('浊度值',data.data[0].zhuodu,' NTU');
			}
		});
  	});
	

    //仪表盘
    var myChart1 = echarts.init(document.getElementById('borad0'),"macarons");
    var myChart2 = echarts.init(document.getElementById('borad1'),"macarons");
    var myChart3 = echarts.init(document.getElementById('borad2'),"macarons");
    var myChart4 = echarts.init(document.getElementById('borad3'),"macarons");
    function showPHchart(name,data){
    	var option = {
		    tooltip : {
		        formatter: "{a} <br/>{b} : {c}%"
		    },
		    series : [
		        {
		            name:'业务指标',
		            type:'gauge',
		            splitNumber: 10,       // 分割段数，默认为5
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.2, '#92b2e3'],[0.5, '#75dd9c'],[1, '#e8a6ff']], 
		                    width: 3
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                splitNumber:5,   // 每份split细分多少段
		                length :6,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto'
		                }
		            },
		            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    color: 'auto',
		                    fontSize: 12
		                }
		            },
		            splitLine: {           // 分隔线
		                show: true,        // 默认显示，属性show控制显示与否
		                length :10,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    color: 'auto'
		                }
		            },
		            pointer : {
		                width : 3 ,
		                color : '#ee4141'
		            },
		            title : {
		                show : true,
		                offsetCenter: [0, '90%'],    
		                textStyle: {      
		                    fontWeight: 'bolder'
		                }
		            },
		            detail : {
		                formatter:'{value}',
		                textStyle: {       
		                    color: '#ee2c2c',
		                    fontSize: 12
		                },
		                offsetCenter: [0, '-20%'], 
		            },
		            data:[{value: 50, name: name}]
		        }
		    ]
		};
		option.series[0].data[0].value = data;
		myChart1.setOption(option,true);
    }
    function showSWchart(name,data,unit){
    	var option = {
		    tooltip : {
		        formatter: "{a} <br/>{b} : {c}%"
		    },
		    series : [
		        {
		            name:'业务指标',
		            type:'gauge',
		            splitNumber: 10,       // 分割段数，默认为5
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.2, '#92b2e3'],[0.5, '#75dd9c'],[1, '#e8a6ff']], 
		                    width: 3
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                splitNumber:5,   // 每份split细分多少段
		                length :6,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto'
		                }
		            },
		            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    color: 'auto',
		                    fontSize: 12
		                }
		            },
		            splitLine: {           // 分隔线
		                show: true,        // 默认显示，属性show控制显示与否
		                length :10,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    color: 'auto'
		                }
		            },
		            pointer : {
		                width : 3 ,
		                color : '#ee4141'
		            },
		            title : {
		                show : true,
		                offsetCenter: [0, '90%'],    
		                textStyle: {      
		                    fontWeight: 'bolder'
		                }
		            },
		            detail : {
		                formatter:'{value}'+unit,
		                textStyle: {       
		                    color: '#ee2c2c',
		                    fontSize: 12
		                },
		                offsetCenter: [0, '-20%'], 
		            },
		            data:[{value: 50, name: name}]
		        }
		    ]
		};
		option.series[0].data[0].value = data;
		myChart2.setOption(option,true);
    }
    function showRJchart(name,data,unit){
    	var option = {
		    tooltip : {
		        formatter: "{a} <br/>{b} : {c}%"
		    },
		    series : [
		        {
		            name:'业务指标',
		            type:'gauge',
		            splitNumber: 10,       // 分割段数，默认为5
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.2, '#92b2e3'],[0.5, '#75dd9c'],[1, '#e8a6ff']], 
		                    width: 3
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                splitNumber:5,   // 每份split细分多少段
		                length :6,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto'
		                }
		            },
		            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    color: 'auto',
		                    fontSize: 12
		                }
		            },
		            splitLine: {           // 分隔线
		                show: true,        // 默认显示，属性show控制显示与否
		                length :10,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    color: 'auto'
		                }
		            },
		            pointer : {
		                width : 3 ,
		                color : '#ee4141'
		            },
		            title : {
		                show : true,
		                offsetCenter: [0, '90%'],    
		                textStyle: {      
		                    fontWeight: 'bolder'
		                }
		            },
		            detail : {
		                formatter:'{value}'+unit,
		                textStyle: {       
		                    color: '#ee2c2c',
		                    fontSize: 12
		                },
		                offsetCenter: [0, '-20%'], 
		            },
		            data:[{value: 50, name: name}]
		        }
		    ]
		};
		option.series[0].data[0].value = data;
		myChart3.setOption(option,true);
    }
    function showZDchart(name,data,unit){
    	var option = {
		    tooltip : {
		        formatter: "{a} <br/>{b} : {c}%"
		    },
		    series : [
		        {
		            name:'业务指标',
		            type:'gauge',
		            splitNumber: 10,       // 分割段数，默认为5
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.2, '#92b2e3'],[0.5, '#75dd9c'],[1, '#e8a6ff']], 
		                    width: 3
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                splitNumber:5,   // 每份split细分多少段
		                length :6,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto'
		                }
		            },
		            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    color: 'auto',
		                    fontSize: 12
		                }
		            },
		            splitLine: {           // 分隔线
		                show: true,        // 默认显示，属性show控制显示与否
		                length :10,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    color: 'auto'
		                }
		            },
		            pointer : {
		                width : 3 ,
		                color : '#ee4141'
		            },
		            title : {
		                show : true,
		                offsetCenter: [0, '90%'],    
		                textStyle: {      
		                    fontWeight: 'bolder'
		                }
		            },
		            detail : {
		                formatter:'{value}'+unit,
		                textStyle: {       
		                    color: '#ee2c2c',
		                    fontSize: 12
		                },
		                offsetCenter: [0, '-20%'], 
		            },
		            data:[{value: 50, name: name}]
		        }
		    ]
		};
		option.series[0].data[0].value = data;
		myChart4.setOption(option,true);
    }
    var lsPHData = [], lsSWData = [], lsRJData = [], lsZDData = [];
    var cnPHData = [], cnSWData = [], cnRJData = [], cnZDData = [];
    var ygPHData = [], ygSWData = [], ygRJData = [], ygZDData = [];
    var xAxisData = [];
    $("#water_li li").each(function(index,element){
    	var xLength;
    	if($(element).hasClass("active")){
    		getJSONData(URL+'/waterday?id=1004',function(data){
    			$(data.data).each(function(index,value){
    				var targetDate = new Date(value.time); 
    				var date = targetDate.pattern("MM-dd");
    				lsPHData.push(parseFloat(value.ph));
	    			lsSWData.push(parseFloat(value.shuiwen));
	    			lsRJData.push(parseFloat(value.rongjieyang));
	    			lsZDData.push(parseFloat(value.zhuodu));
	    			xAxisData.push(date);
    			});
    			xAxisData.reverse();
    			lsPHData.reverse();
    			lsSWData.reverse();
    			lsRJData.reverse();
    			lsZDData.reverse();
    			xLength = xAxisData.length;
    		});
    		getJSONData(URL+'/waterday?id=1006',function(data){
    			$(data.data).each(function(index,value){
    				cnPHData.push(parseFloat(value.ph));
	    			cnSWData.push(parseFloat(value.shuiwen));
	    			cnRJData.push(parseFloat(value.rongjieyang));
	    			cnZDData.push(parseFloat(value.zhuodu));
    			});
    			setTimeout(function(){
    				if(cnPHData.length<xLength){
	    				var length = cnPHData.length;
					    for(var i=0;i< xLength-length;i++){
					        cnPHData.push('');
					    }
					}
					if(cnSWData.length<xLength){
						var length = cnSWData.length;
					    for(var i=0;i< xLength-length;i++){
					        cnSWData.push('');
					    }
					}
					if(cnRJData.length<xLength){
						var length = cnRJData.length;
					    for(var i=0;i< xLength-length;i++){
					        cnRJData.push('');
					    }
					}
					if(cnZDData.length<xLength){
						var length = cnZDData.length;
					    for(var i=0;i< xLength-length;i++){
					        cnZDData.push('');
					    }
					}
					cnPHData.reverse();
	    			cnSWData.reverse();
	    			cnRJData.reverse();
	    			cnZDData.reverse();
    			},100);
    		});
    		getJSONData(URL+'/waterday?id=1007',function(data){
    			$(data.data).each(function(index,value){
    				ygPHData.push(parseFloat(value.ph));
	    			ygSWData.push(parseFloat(value.shuiwen));
	    			ygRJData.push(parseFloat(value.rongjieyang));
	    			ygZDData.push(parseFloat(value.zhuodu));
    			});
    			setTimeout(function(){
    				if(ygPHData.length<xLength){
	    				var length = ygPHData.length;
					    for(var i=0;i< xLength-length;i++){
					        ygPHData.push('');
					    }
					}
					if(ygSWData.length<xLength){
						var length = ygSWData.length;
					    for(var i=0;i< xLength-length;i++){
					        ygSWData.push('');
					    }
					}
					if(ygRJData.length<xLength){
						var length = ygRJData.length;
					    for(var i=0;i< xLength-length;i++){
					        ygRJData.push('');
					    }
					}
					if(ygZDData.length<xLength){
						var length = ygZDData.length;
					    for(var i=0;i< xLength-length;i++){
					        ygZDData.push('');
					    }
					}
					ygPHData.reverse();
	    			ygSWData.reverse();
	    			ygRJData.reverse();
	    			ygZDData.reverse();
    			},100);
    		});
    		
    		setTimeout(function(){
    			showPHLineChart(lsPHData,cnPHData,ygPHData,xAxisData,7,9,'');
    		},500);
    		
    	}
    });

	//时间段水质量分析
	$('#water_li li').click(function() {
        var i = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        if(i ==  0){
    		setTimeout(function(){
    			showPHLineChart(lsPHData,cnPHData,ygPHData,xAxisData,0,10,'');
    		},200);
        }else if(i==1){
        	setTimeout(function(){
    			showPHLineChart(lsSWData,cnSWData,ygSWData,xAxisData,5,15,'℃');
    		},200);
        }else if(i==2){
        	setTimeout(function(){
    			showPHLineChart(lsRJData,cnRJData,ygRJData,xAxisData,4,15,'mg/L');
    		},200);
        }else if(i==3){
        	setTimeout(function(){
    			showPHLineChart(lsZDData,cnZDData,ygZDData,xAxisData,0,80,'NTU');
    		},200);
        }
    });
	var waterChart = echarts.init(document.getElementById('waterChart'),"macarons");
    function showPHLineChart(lsData, cnData, ygData, xData,minNumber,maxNumber,unit){
    	var seriesData = [
	        {
	            name:'林山水源地',
	            type:'line',
	            smooth: true,
	            lineStyle:{
	                normal:{
	                    color: '#cf2f2f'
	                }
	            },
	            itemStyle:{
	                normal:{
	                    color: '#cf2f2f'
	                }
	            },
	            data: lsData
	        },
	        {
	            name:'城南水厂',
	            type:'line',
	            smooth: true,
	            lineStyle:{
	                normal:{
	                    color: '#54c1a6'
	                }
	            },
	            itemStyle:{
	                normal:{
	                    color: '#54c1a6'
	                }
	            },
	            data:cnData
	        },
	        {
	            name:'远古水厂',
	            type:'line',
	            smooth: true,
	            lineStyle:{
	                normal:{
	                    color: '#3670d1'
	                }
	            },
	            itemStyle:{
	                normal:{
	                    color: '#3670d1'
	                }
	            },
	            data:ygData
	        }
	    ];

    	var water_option = {
	        tooltip:{
	            trigger: 'item',
	            show:true,
	            showContent:true,
	            formatter:'{c}'+unit,
	            backgroundColor: '#cf2f2f',
	            position: 'top'
	        },
	        legend: {
		        data:['林山水源地','城南水厂','远古水厂'],
		    },
	        grid: {
		        left: '4%',
		        right: '4%',
		        bottom: '9%',
		        containLabel: true
		    },
	        xAxis: {
	            type: 'category',
	            boundaryGap: false,
	            axisLabel: {
	                rotate: 60,
	                interval: 0,
	                textStyle:{
	                    fontSize: 10,
	                }
	            },
	            axisTick: {
	                show: false
	            },
	            axisLine:{
	                lineStyle:{
	                    color: '#f5f6f7',
	                    width: 1
	                }
	            },
	            splitLine:{
	                show: false
	            },
	            data: xData
	        },
	        yAxis: {
	            type: 'value',
	            name: '单位：'+unit,
	            nameLocation: 'end',
	            nameTextStyle:{
	                color: '#333'
	            },
	            min: minNumber,
	            max: maxNumber,
	            axisLabel: {
	                margin: 5
	            },
	            axisTick: {
	                show: false,
	                alignWithLabel: true
	            },
	            splitLine:{ 
	                show: true,
	                lineStyle:{
	                    color: '#f1f2f3'
	                }
	            },
	            axisLine:{
	                lineStyle:{
	                    color: '#f5f6f7',
	                    width: 1
	                }
	            },
	            splitArea:{
	                show: false
	            }
	        },
	        series: seriesData
	    };
		waterChart.setOption(water_option);
    }
    
                    
	$('#waterControl li').click(function() {
        var i = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('#waterList li').eq(i).show(200).siblings().hide();
    });
                       
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663983'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1259663983' type='text/javascript'%3E%3C/script%3E"));</script>
